<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/common/bootstrap.min.css">
    <script src="/common/jquery.min.js"></script>
    <script src="/common/popper.min.js"></script>
    <script src="/common/bootstrap.min.js"></script>
    <script type="text/javascript" src="/common/common.js"></script>

    <script>

        setTimeout('genDBResultList()', 100);

        function CreateTableFromJSON(json) {

            // EXTRACT VALUE FOR HTML HEADER.
            // ('Book ID', 'Book Name', 'Category' and 'Price')
            var col = [];
            for (var i = 0; i < json.length; i++) {
                for (var key in json[i]) {
                    if (col.indexOf(key) === -1) {
                        col.push(key);
                    }
                }
            }

            // CREATE DYNAMIC TABLE.
            var table = document.createElement("table");
            table.className = "table";

            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

            var tr = table.insertRow(-1);                   // TABLE ROW.

            for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th"); // TABLE HEADER.
                th.innerHTML = col[i];
                tr.appendChild(th);
            }

            // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var i = 0; i < json.length; i++) {

                tr = table.insertRow(-1);

                for (var j = 0; j < col.length; j++) {
                    var tabCell = tr.insertCell(-1);
                    var tName = json[i][col[j]]
                    tabCell.innerHTML = markRed(tName, $("#columnName").val());
                }
            }

            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("dbResultList");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
        }

        function genDBResultList() {

            $.ajax({
                       url: getRealPath() + "/db/queryTable",
                       type: "get",
                       data: {
                           "schema": $("#schema").val(),
                           "tableName": $("#tableName").val(),
                           "columnComment": $("#columnComment").val(),
                           "columnName": $("#columnName").val()
                       },
                       dataType: "json",
                       success: function (result) {
                           var json = eval(result);
                           CreateTableFromJSON(json)

                           console.log(result);
                       }
                   });
            console.log('123')
        }

    </script>
</head>
<body>

<div class="container">
    <form class="form-inline" action="">

        <input type="hidden" id="schema" name="schema" th:value="${schema}">

        <label for="text" class="mb-2 mr-sm-2">表名:</label>
        <input type="text" class="form-control mb-2 mr-sm-2" id="tableName" placeholder="表名" name="tableName"
               onblur="genDBResultList()" th:value="${tableName}">


        <label for="text" class="mb-2 mr-sm-2">字段名:</label>
        <input type="text" class="form-control mb-2 mr-sm-2" id="columnName" placeholder="字段名" name="columnName"
               onblur="genDBResultList()">


        <label for="text" class="mb-2 mr-sm-2">字段备注:</label>
        <input type="text" class="form-control mb-2 mr-sm-2" id="columnComment" placeholder="表备注" name="columnComment"
               onblur="genDBResultList()">
    </form>

    <div id="dbResultList"></div>
</div>
</body>
</html>